<template>
 <div class="container">
   <div ref="chart_ref" style="width: 600px; height: 400px"></div>
 </div>
</template>

<script>
export default {
  name: 'userData',
  components: {},
  props: ['tableList'],
  data () {
    return {
      arr: [0, 0, 0, 0, 0, 0, 0]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    for (let i = 0; i < this.tableList.length; i++) {
      // console.log(+new Date(this.tableList[i].createdAt))
      // console.log(+new Date(this.getFMdate(0)))
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(0)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(30))) {
        this.arr[6] = this.arr[6] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-30)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(0))) {
        this.arr[5] = this.arr[5] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-60)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(-30))) {
        this.arr[4] = this.arr[4] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-90)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(-60))) {
        this.arr[3] = this.arr[3] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-120)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(-90))) {
        this.arr[2] = this.arr[2] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-150)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(-120))) {
        this.arr[1] = this.arr[1] + 1
      }
      if (+new Date(this.tableList[i].createdAt) > +new Date(this.getFMdate(-180)) && +new Date(this.tableList[i].createdAt) < +new Date(this.getFMdate(-150))) {
        this.arr[0] = this.arr[0] + 1
      }
    }
    this.initChart()
  },
  methods: {
    getFMdate (number, separator) {
      const n = parseInt(number)
      const nd = new Date()
      const day = nd.getDate()
      const setd = new Date(nd.setDate(day + n))
      const ryear = setd.getFullYear()
      const rmonth = setd.getMonth() + 1
      const rday = setd.getDate()
      let frmonth, frday
      // month day + '0'
      if (rmonth < 10) {
        frmonth = '0' + rmonth
      } else {
        frmonth = rmonth
      }
      if (rday < 10) {
        frday = '0' + rday
      } else {
        frday = rday
      }
      // separator
      const sep = separator || '-'
      return ryear + sep + frmonth + sep + frday
    },
    initChart () {
      var mChart = this.$echarts.init(this.$refs.chart_ref)
      const option = {
        xAxis: {
          type: 'category',
          data: [this.getFMdate(-180), this.getFMdate(-150), this.getFMdate(-120), this.getFMdate(-90), this.getFMdate(-60), this.getFMdate(-30), this.getFMdate(0)]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [this.arr[0], this.arr[1], this.arr[2], this.arr[3], this.arr[4], this.arr[5], this.arr[6]],
          type: 'line'
        }]
      }
      mChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">

</style>
